<template>
  <div class="talk">
    <button @click="talkStore.getLoveTalk()">获取一句土味情话</button>
    <ul>
      <li v-for="talk in talkList" :key="talk.id">{{ talk.title }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="LoveTalk">
  import axios from 'axios'
  import { nanoid } from 'nanoid'
  import { storeToRefs } from 'pinia'
  import { useTalkStore } from "@/store/talk"
  const talkStore = useTalkStore()
  const { talkList } = storeToRefs(talkStore)


  //第二种写法：
  function getLoveTalk() {
    talkStore.getLoveTalk()
  }

  
  talkStore.$subscribe((mutate,state)=>{
    console.log('talkStore里面保存的数据发生了变化',mutate, state);
    //存入浏览器本地
  localStorage.setItem('talkList', JSON.stringify(state.talkList))
  })


</script>

<style scoped>
  .talk {
    background-color: orange;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
</style>
